<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>123</div>
  <span>123</span>
  <div class="box"></div>

  <script>
    // 真实dom注册事件的过程
    // document.querySelector('div').addEventListener('click', function() {

    // })

    // 真实的dom属性太多了 将来vue控制起来太复杂了
    // vue是响应式框架 数据一变 视图会自动跟着变 这边vue更新视图时 会有对比策略(最基础的就是虚拟dom)
    console.dir(document.querySelector('div'))

    /*
      任何一个.vue文件中的template模板中的任何结构 div  span  都不是真实dom
      为什么?
      真实dom它太复杂了 无用的属性太多了 找不同起来 找的麻烦
      优化一下 将真实dom中的关键属性抽出来 作为虚拟dom 这个时候找不同 不麻烦
      虚拟dom本质就是一个简单的js对象 用于表示真实dom结构  { type: 'div' }
    */

    /*
      虚拟dom已经优化了单个dom的找不同的策略, 奈何整个页面的结构是一个树形结构, 找不同起来 更难受

      对于树形结构 也会有优化策略(优化找不同的过程): diff算法 快速找不同
      1、只比较同一级，不跨级比较
      2、tag不相同，直接删掉重建，不再深度比较(继续遍历树形结构的成本一定是高于删除重建)
      3、tag和key，两者都相同，则认为是相同节点，不在深度比较

        有key:
        ['张三', '李四']
        <li key="1">张三</li>
        <li key="2">李四</li>

        ['张三', '王五', '李四']
        <li key="1">张三</li>
        <li key="3">王五</li>
        <li key="2">李四</li>

        没有key:
        ['张三', '李四']
        <li>张三</li>
        <li>李四</li>

        ['张三', '王五', '李四']
        <li>张三</li>
        <li>王五</li>
        <li>李四</li>

        没有key 默认会按照下标比 如果是中间插入了一个新的数据  diff就会出现问题 => key 很重要 重要性体现在将来比不同时找到正确的节点去比较

        key 提升vue对比时的性能(没有key会出现乱比的情况)
    */
  </script>
</body>
</html>
